// ---------------------------------折线图----------------------------
const zhexiantu = () => {
  const myechar = echarts.init(document.querySelector('#line'))
  const option = {

    title: {
      text: '2022全学科薪资走势',
      top: '15',
      let: '10',
      textStyle: {
        fontSize: 16,
      },
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: '#999'
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      }
    },
    series: [
      {
        data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
        type: 'line',
        smooth: true,
        // 折线的粗细
        lineStyle: {
          width: 6,
        },
        // 拐点的大小
        symbolSize: 10,
        // 背景填充
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 0.8, color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
            },
            {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },

      }
    ],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20%'
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
        }, {
          offset: 1, color: '#5D75F0' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }
    ],
  }
  myechar.setOption(option)
}
zhexiantu()


// ---------------------右上角饼图--------------------------
const bingtu = () => {
  let myechar = echarts.init(document.querySelector('#salary'))
  let option = {
    title: {
      text: '班级薪资分布',
      left: 10,
      top: 15,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '6%',
      left: 'center'
    },
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['50%', '70%'],
        // avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: '40',
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '1万以下' },
          { value: 235, name: '1万-2万' },
          { value: 580, name: '1.5万-2万' },
          { value: 484, name: '2万以上' },
        ]
      }
    ]
  };
  myechar.setOption(option)
}
bingtu()


// -----------------------中间柱状图-------------------------
const mycenter = () => {
  let mychart = echarts.init(document.querySelector('#lines'))
  let option = {
    xAxis: {
      type: 'category',
      data: ['张三', '李四', '王二', '麻子', '小明', '小红', '小刘'],
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed',
        },
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        },
      },
    },
    grid: {
      left: '70',
      right: '30',
      top: '30',
      bpttom: '50',
    },
    series: [
      {
        data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        type: 'bar',
        name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      },
      {
        data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        type: 'bar',
        name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      }
    ],
    tooltip: {
      show: 'true',
      trigger: 'item',
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#34D39A' // 0% 处的颜色
        }, {
          offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
        }, {
          offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }
    ],
  };
  mychart.setOption(option)

}
mycenter()





// -------------------------左下角饼图-------------------------------
const bingtu2 = () => {
  let myechar = echarts.init(document.querySelector('#gender'))
  let option = {
    title: [
      {
        text: '班级薪资分布',
        left: 10,
        top: 15,
        textStyle: {
          fontSize: 16
        }
      },
      {
        text: '男生',
        left: '45%',
        top: '50%',
        textStyle: {
          fontSize: 12
        }
      },
      {
        text: '女生',
        left: '45%',
        top: '90%',
        textStyle: {
          fontSize: 12
        }
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   bottom: '6%',
    //   left: 'center'
    // },
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['50%', '30%'],
        data: [
          { value: 1048, name: '1万以下' },
          { value: 235, name: '1万-2万' },
          { value: 580, name: '1.5万-2万' },
          { value: 484, name: '2万以上' },
        ]
      },
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['50%', '70%'],
        data: [
          { value: 1048, name: '1万以下' },
          { value: 235, name: '1万-2万' },
          { value: 580, name: '1.5万-2万' },
          { value: 484, name: '2万以上' },
        ]
      }

    ]
  };
  myechar.setOption(option)
}
bingtu2()


// ----------------------地图--------------------
const mapchart = () => {
  // 因为用地图表示每个省有几名同学
  // 所以可以提前准备好数据
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  let mychart = echarts.init(document.querySelector('#map'))
  let option = {

    title: {
      text: '籍贯分布',
      left: 10,
      top: 15,
      textStyle: {
        fontSize: 16
      }
    },
    series: {
      name: '籍贯分布',
      type: 'map',
      map: 'china',
      data: mapData,
      label: {
        show: true,
        fontSize: 10,
        color: 'rgba(0,0,0,0.7)',
      },
      itemStyle: {
        borderColor: 'rgba(0, 0, 0, 0.2)',
        areaColor: '#E0FFFF',
      },
      emphasis: {
        areaColor: '#34D39A',
        borderWidth: 0,
        shadowBlur: 20,
        shadowOffsetX: 0,
        shadowOffsety: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
    },
    tooltip: {
      // 自定义提示格式：{a}表示series中的name  {b}表示各省的名字  {c}表示各省的数据
      formatter: '{b}：{c}位学员',
      textStyle: {
        color: '#fff'
      },
      // 去除边框
      borderColor: 'transparent',
      // 透明色
      backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },
    visualMap: {
      type: 'continuous',
      min: 0,
      max: 20,
      // 地图渐变颜色
      inRange: {
        color: ['#fff', '#0075F0']
      },
      text: [20, 0],
      left: 40,
      bottom: 20
    }
  }
  mychart.setOption(option)
}
mapchart()